<template>
	<view class="report-center">
		<view class="u-demo-block">
			<u-swiper :list="imgList" @change="e => current = e.current" :autoplay="true" imgMode="aspectFill" height="150">
				<view slot="indicator" class="indicator">
					<view class="indicator__dot" v-for="(item, index) in imgList" :key="index"
						:class="[index === current && 'indicator__dot--active']">
					</view>
				</view>
			</u-swiper>
		</view>
		<view>
			<u-notice-bar :text="scrollText"></u-notice-bar>
		</view>
		<WordCloudChart />
		<u-divider text="分割线" :dot="true"></u-divider>
		<RoundPeaksChart />
		<u-divider text="分割线" :dot="true"></u-divider>
		<AreaMap />
		<view>
			<u-back-top :scrollTop="scrollTop" :mode="mode" :iconStyle="iconStyle"></u-back-top>
		</view>
	</view>
</template>

<script>
	import WordCloudChart from '@/components/WordCloudChart.vue'
	import RoundPeaksChart from '@/components/RoundPeaksChart.vue'
	import AreaMap from '@/components/AreaMap.vue'
	import imgF from '@/static/reportCenterImg/F.png'
	import img1701 from '@/static/reportCenterImg/1701.png'
	import imgZZ from '@/static/reportCenterImg/ZZ.png'
	export default {
		components: {
			WordCloudChart,
			RoundPeaksChart,
			AreaMap
		},
		data() {
			return {
				current: 0,
				imgList: [imgZZ, imgF, img1701],
				scrollText: '巷子里飘满煤炉的味道 雾气穿过她年轻的脖子 直到今天都没有散去',
				// 返回顶部
				scrollTop: 0,
				mode: 'circle',
				iconStyle: {
					fontSize: '32rpx',
					color: '#2979ff'
				}
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style lang="scss">
	.report-center {
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}
</style>
